<%@include file="parts/Header.jsp" %>
<%--
    Document   : About Us
    Created on : 16/08/2011, 11:47:35 ص
    Author     : Ahmed
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Services</title>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

        <!-- markItUp! skin -->
        <link rel="stylesheet" type="text/css" href="styles/markitup/skins/markitup/style.css">
        <!--  markItUp! toolbar skin -->
        <link rel="stylesheet" type="text/css" href="styles/markitup/sets/default/style.css">
        <script type="text/javascript">
            $(function() {
                $('#markItUp').markItUp(mySettings);
	
                $('.add').click(function() {
                    $('#markItUp').markItUp('insert',
                    { 	openWith:'<opening tag>',
                        closeWith:'<\/closing tag>',
                        placeHolder:"New content"
                    }
                );
                    return false;
                });
	
                // And you can add/remove markItUp! whenever you want
                // $(textarea).markItUpRemove();
                $('.toggle').click(function() {
                    if ($("#markItUp.markItUpEditor").length === 1) {
                        $("#markItUp").markItUp('remove');
                        $("span", this).text("get markItUp! back");
                    } else {
                        $('#markItUp').markItUp(mySettings);
                        $("span", this).text("remove markItUp!");
                    }
                    return false;
                });
            });
        </script>
        <!-- markItUp! -->
        <script type="text/javascript" src="styles/markitup/jquery.markitup.js"></script>
        <!-- markItUp! toolbar settings -->
        <script type="text/javascript" src="styles/markitup/sets/default/set.js"></script>

        <script>
            $(function() {
                $( "#accordion" ).accordion();
            });
        </script>
        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: auto; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: separate; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>
        <script>
            
            $(function() {

                $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 700,
                    width: 820,
                    modal: true
                   
                });
 
                $( "#create-user" )
                .button()
                .click(function() {
                    $( "#dialog-form" ).dialog( "open" );
                });
            });
            
            
             
        </script>




        <style type="text/css">
            .js #dialog-form {display: none;}

        </style>
        <script type="text/javascript">
            document.documentElement.className = 'js';
        </script>

    </head>
    <body onload="resizePage()">
        <center>
            <div id="innerPageContainer" >
                <table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td class="firstList">Services</td>
                        <td rowspan="3" id="innerPageCell" >

                            <div  id="accordion" >
                                <logic:iterate name="AdminBean" property="service" id="msg">

                                    <h3><b><bean:write name="msg" property="serviceName"/><b>&nbsp;&nbsp;|&nbsp;&nbsp;</b><bean:write name="msg" property="serviceShortDescription"/></b><br/></h3>
                                    <div>
                                        <p>
                                            <img src="<bean:write name='msg' property='serviceImage'/>"/><br/>

                                            ${msg.serviceDescription}

                                            <br/>
                                            <br/>
                                            <br/>
                                            <br/>
                                            <html:link action="/admin?actionType=deleteService" paramId="serviceId" paramName="msg" paramProperty="serviceId"><font color="red"><b><i>Delete Service</i></b></font></html:link>
                                            <b><font color="blue">|</font></b> <html:link action="/admin?actionType=goToUpdateService" paramId="serviceId" paramName="msg" paramProperty="serviceId"><font color="red"><b><i>Modify Service</i></b></font></html:link>



                                            <!-- link here -->
                                        </p>
                                    </div>


                                </logic:iterate>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td id="menuCell">
                            <center><button id="create-user">Add Service</button></center>

                        </td>
                        <td>

                        </td>
                    </tr>

                    <tr>
                        <td class="lastList">

                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" class="footer">
                            <jsp:include page="parts/Footer.jsp"/>
                        </td>
                    </tr>
                </table>

            </div>



            <div id="dialog-form" title="Create Service">
                <img src="styles/Images/logo2.gif"/>
                <html:form action="/admin?actionType=addService" enctype="multipart/form-data">
                    <table style="font-size: 15">
                        <tr></tr>
                        <tr><td>Service name</td><td><html:text styleId="sn" property="serviceName"/></td></tr>
                        <tr><td>Service Logo</td><td><html:file property="serviceLog"/></td></tr>
                        <tr><td>Service Description</td><td><html:textarea  styleId="markItUp" property="serviceDescription"/></td></tr>
                        <tr><td>Service Image</td><td><html:file property="serviceImg"/></td></tr>
                        <tr><td>Service short-description</td>
                            <td>
                                <html:textarea styleId="ssd" property="serviceShortDescription"/>
                            </td>
                        </tr>
                        <tr><td>Show menu</td><td><html:select property="showMenu">
                                    <html:option value="yes">Yes</html:option>
                                    <html:option value="no">No</html:option>
                                </html:select>
                            </td>
                        </tr>
                        <tr><td><html:submit onclick="return validate()" value="Add" style=" padding: 10px 15px;
                                     background: #4479BA;
                                     color: #FFF;
                                     -webkit-border-radius: 4px;
                                     -moz-border-radius: 4px;
                                     border-radius: 4px;
                                     border: solid 1px #20538D;
                                     width: 100px;
                                     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
                                     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                     -webkit-transition-duration: 0.2s;
                                     -moz-transition-duration: 0.2s;
                                     transition-duration: 0.2s;
                                     -webkit-user-select:none;
                                     -moz-user-select:none;
                                     -ms-user-select:none;
                                     user-select:none;" /></td><td>
                                <html:reset onclick="return reset()" value="Reset" style=" padding: 10px 15px;
                                            background: #4479BA;
                                            color: #FFF;
                                            -webkit-border-radius: 4px;
                                            -moz-border-radius: 4px;
                                            border-radius: 4px;
                                            border: solid 1px #20538D;
                                            width: 100px;
                                            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
                                            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                                            -webkit-transition-duration: 0.2s;
                                            -moz-transition-duration: 0.2s;
                                            transition-duration: 0.2s;
                                            -webkit-user-select:none;
                                            -moz-user-select:none;
                                            -ms-user-select:none;
                                                user-select:none;"/></td></tr>
                        <tr>
                        <div id="div1"></div> 
                        <div id="div2"></div> 
                        <div id="div3"></div> 
                        </tr>
                    </table>

                    <script>
                        function reset(){
                            document.getElementById('sn').innerHTML=" ";
                            document.getElementById('markItUp').innerHTML=" ";
                            document.getElementById('ssd').innerHTML=" ";                            
                        }
                        
                        function validate(){
                            var sn=document.getElementById('sn').value;
                            var miu=document.getElementById('markItUp').value;
                            var ssd=document.getElementById('ssd').value;
                            if(sn.length<1){
                                document.getElementById('div1').innerHTML='<font color=red>Service name can\'t be Empty</font>';
                                return false
                            }
                            else{
                              document.getElementById('div1').innerHTML='';
                               
                            }
                            if(miu.length<1){
                                document.getElementById('div2').innerHTML='<font color=red>Service Description can\'t be Empty</font>';
                                return false
                            }
                            else{
                                 document.getElementById('div2').innerHTML='';
                            
                            }
                            if(ssd.length<1){
                                document.getElementById('div3').innerHTML='<font color=red>Service Short Description can\'t be Empty</font>';
                                return false
                            }
                            else{
                                 document.getElementById('div3').innerHTML='';
                            
                            }
                            
                        }
                    </script>


                </html:form>
            </div>            




        </center>
    </body>
</html>

